Emergency Services Dashboard Instructions

Step 1: Downloading and Installing Visual Studio Code

Before we start coding, you'll need to install Visual Studio Code (VS Code), a tool to help you write and test your code.

On Windows:

1. Go to the Visual Studio Code download page, and click the Windows download link.
2. Once downloaded, open the installer and follow the installation instructions. Make sure to check the box that says "Add to PATH" during installation.
3. Open VS Code after installation.

On a CoderDojo Laptop (Running Raspberry Pi OS):

1. Open the terminal by clicking the terminal icon or pressing Ctrl + Alt + T.
2. Type the following commands one at a time to install VS Code:

sudo apt update
sudo apt install code -y

3. After installation, type code in the terminal to open VS Code.

Step 2: Creating Your Project Folder and Files

Now let's create the folder and files for your project.

On Windows:

Right-click on your desktop and select New > Folder, then name it EmergencyDashboard.
Open VS Code, and click File > Open Folder, then select the EmergencyDashboard folder.

On Raspberry Pi OS:

Open the File Manager, right-click on the desktop, and create a new folder called EmergencyDashboard.
Open VS Code, then click File > Open Folder and select the EmergencyDashboard folder.

Now, create two files inside the EmergencyDashboard folder:

Click File > New File in VS Code, name the file index.html, and save it.
Create another file, name it style.css, and save it in the same folder.

Step 3: Writing the HTML (Structure of the Webpage)

Next, we'll add the basic structure of the webpage. HTML is the language that tells the browser how to structure the page.

In the index.html file, copy and paste this code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emergency Services Dashboard</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Emergency Services Dashboard</h1>
    </header>
</body>
</html>

Explanation:

<!DOCTYPE html> tells the browser you're using HTML5.
<html lang="en"> starts the HTML document and sets the language to English.
The <head> section contains metadata like the page title, which is set with <title>.
Inside the <body>, you create the content that will be visible on the webpage.

Tip: Always use the Tab key to indent the code inside tags like <html> and <body>. This makes the code easier to read!

Step 4: Creating Sections for Each Emergency Service

Now, let's add sections for Fire, Police, and Ambulance services. Each section will have a title, a description, and a button.

Add the following inside the <body> tag, under the </header> tag:

<div class="service" id="fire-service">
    <h2>Fire Department</h2>
    <p>The Fire Department responds to fires, accidents, and rescue calls.</p>
    <button id="fire-btn">Call Fire Department</button>
</div>

<div class="service" id="police-service">
    <h2>Police Department</h2>
    <p>The Police Department handles crime, public safety, and law enforcement.</p>
    <button id="police-btn">Call Police Department</button>
</div>

<div class="service" id="ambulance-service">
    <h2>Ambulance Service</h2>
    <p>The Ambulance Service provides emergency medical assistance.</p>
    <button id="ambulance-btn">Call Ambulance Service</button>
</div>

Each <div> element represents a different service. Inside each <div> we have a title (<h2>), a description (<p>), and a button (<button>).

Step 5: Adding CSS to Style Your Webpage

Now that you have the structure, let's add some CSS to make your dashboard look nice. Open the style.css file, and paste this code:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
}

header {
    background-color: #333;
    color: white;
    padding: 20px;
}

.service {
    border: 2px solid #ccc;
    padding: 20px;
    margin: 10px;
    display: inline-block;
    width: 25%;
    background-color: white;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    background-color: #1e90ff;
    color: white;
    border: none;
    border-radius: 5px;
}

Explanation:

body: Sets the font, background color, and centers the text.
header: Styles the top section with a dark background and white text.
.service: Adds borders, padding, and spacing around each service block.
button: Styles the buttons with padding, a blue background, and white text.

Step 6: Adding JavaScript for Interactivity

To make the buttons work, we'll add some JavaScript. This will create pop-up alerts when you click the buttons.

Add the following JavaScript to the bottom of the index.html file, just before the closing </body> tag:

<script>
document.getElementById("fire-btn").addEventListener("click", function() {
    alert("Fire Department has been called!");
});

document.getElementById("police-btn").addEventListener("click", function() {
    alert("Police Department has been called!");
});

document.getElementById("ambulance-btn").addEventListener("click", function() {
    alert("Ambulance Service has been called!");
});
</script>

When the buttons are clicked, a message will pop up, simulating a call to each emergency service.